<script setup>
	import { onMounted, ref, watch } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { parseTime } from '@/utils/index.js'

	const props = defineProps({
		status: { type: Number, default: 0 },
		categary: { type: Number, default: 1 },
	})

	const currentPage = ref(1)
	const goodslist = ref([])
	async function getApplyList() {
		const res = await http.request({
			url: '/api/shop/applyGoodsList',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
				status: props.status,
			},
		})
		console.log(res)
		goodslist.value = [...goodslist.value, ...res.data]
	}
	async function getBagList() {
		const res = await http.request({
			url: '/api/shop/userBagShop',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
				status: props.status,
			},
		})
		console.log(res)
		goodslist.value = [...goodslist.value, ...res.data]
	}

	watch(
		() => props.status,
		(newstatus) => {
			console.log(newstatus)
			if (props.categary == 3) {
				currentPage.value = 1
				goodslist.value = []
				if (props.status == 0) {
					getApplyList()
				} else {
					getBagList()
				}
			}
		},
		{ deep: true, immediate: true }
	)

	function getMore() {
		++currentPage.value
		if (props.status == 0) {
			getApplyList()
		} else {
			getBagList()
		}
	}

	// 在方法中调用复制到剪贴板的操作
	function copyTextToClipboard(text) {
		uni.setClipboardData({
			data: text,
			success: function () {
				// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
				uni.utils.toast('复制成功')
			},
		})
	}

	onMounted(() => {
		currentPage.value = 1
		goodslist.value = []
		if (props.status == 0) {
			getApplyList()
		} else {
			getBagList()
		}
	})
	// onShow(() => {
	// 	if (props.status == 0) {
	// 		getApplyList()
	// 	} else {
	// 		getBagList()
	// 	}
	// })
</script>

<template>
	<view class="myreward-content">
		<scroll-view
			scroll-y="true"
			class="scroll-Y"
			@scrolltolower="getMore"
			style="height: 67vh"
		>
			<!-- 天选之人-在售 -->
			<view
				class="goodslist"
				style="margin-bottom: 100rpx"
				v-if="status != 0"
			>
				<view
					class="prizegoods"
					v-for="item in goodslist"
					:key="item.id"
				>
					<image
						:src="item.img"
						style="border-radius: 6rpx; background-color: #fff"
					></image>
					<view class="goods-num" v-if="status == 1">{{
						item.leftover
					}}</view>
					<view class="goods-num" v-if="status == 2">{{
						item.num - item.leftover
					}}</view>
					<view class="goods-num" v-if="status == 3">{{
						item.sell_num
					}}</view>
				</view>
			</view>

			<!-- 奖品列表-审核 -->
			<view class="" style="margin-bottom: 120rpx" v-else>
				<view
					class="lucky-audit"
					v-for="item in goodslist"
					:key="item.id"
				>
					<view class="audit-img">
						<image
							class=""
							:src="item.img"
							style="border-radius: 10rpx; background-color: #fff"
						></image>
					</view>
					<view class="audit-information">
						<view
							class="information-num"
							style="justify-content: space-between"
						>
							<view class="">
								<text class="">申请入库数量：</text>
								<text class="" style="color: #a378ff">{{
									item.num
								}}</text>
							</view>
							<view
								class=""
								style="
									justify-content: flex-end;
									color: #a378ff;
									margin-left: 60rpx;
								"
								>已申请</view
							>
						</view>
						<view class="information-num">
							<text class="">时间：</text>
							<text
								class=""
								style="color: #a378ff; margin-left: 20rpx"
							>
								{{
									parseTime(item.add_time, '{y}-{m}-{d}')
								}}</text
							>
						</view>
						<view class="information-num">
							<text class="">快递单号：</text>
							<text class="express"> {{ item.express_sn }}</text>
							<view
								class="copy"
								@click="copyTextToClipboard(item.express_sn)"
								>复制</view
							>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<style lang="scss" scoped>
	.myreward-content {
		padding-top: 17rpx;
		.goodslist {
			display: flex;
			justify-content: space-evenly;
			flex-wrap: wrap;
			width: 100%;
		}
		.prizegoods {
			display: flex;
			position: relative;
			.goods-num {
				width: 40rpx;
				height: 30rpx;
				border-radius: 10rpx;
				border: 1rpx solid #7948ea;
				background-color: #fff;
				position: absolute;
				line-height: 30rpx;
				bottom: 19rpx;
				right: 0rpx;
				z-index: 1;
				text-align: center;
				font-size: 20rpx;
				color: #7948ea;
			}

			image {
				width: 169rpx;
				height: 226rpx;
				margin-bottom: 19rpx;
				border-radius: 10rpx;
			}
		}

		.lucky-audit {
			// margin-bottom: 120rpx;
			height: 224rpx;
			background-color: #fff;
			border-radius: 14rpx;
			margin: 20rpx auto;
			display: flex;

			.audit-img {
				height: 224rpx;
				margin: 0 42rpx 0 9rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 156rpx;
					height: 211rpx;
				}
			}
		}

		.audit-information {
			width: 100%;
			height: 210rpx;
			padding-right: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.information-tit {
			display: flex;
		}

		.information-num {
			display: flex;
			width: 100%;
			// justify-content: space-between;
			margin-top: 30rpx;
			font-size: 26rpx;
		}

		.express {
			color: #808080;
			font-size: 20rpx;
			text-align: center;
			margin-left: 10rpx;
			line-height: 37rpx;
		}

		.copy {
			background-color: #af8ef5;
			width: 52rpx;
			// line-height: 26rpx;
			border-radius: 8rpx;
			color: #fff;
			margin-left: 30rpx;
			font-size: 20rpx;
			text-align: center;
			line-height: 37rpx;
		}
	}
</style>
